<template>
	<view class="content">
		<view class="nav-part-bg"></view>
		<view class="body">
			<view class="nav-day">
				<selectDay :outDate="selDay" @selectDay="initPage"></selectDay>
			</view>
			<view class="nav-body" v-if="hisTask.length">
				<view class="footer-box" v-for="(mitem, mindex) in hisTask" :key="mindex">
					<view class="footer" v-for="(citem, cindex) in mitem.stations" :key="cindex" v-if="citem.securityTime">
						<view class="step-spot">
							<u-collapse class="collapse">
								<u-collapse-item :title="'站点：' + citem.name" name="Docs guide">
									<view class="step">
										<view class="cellbody">
											<view class="cellbody-row-left">
												<text class="cellbody-title">出站检查：</text>
												<text class="cellbody-content">
													{{ citem.checkOutSecurity ? (JSON.parse(citem.checkOutSecurity).result == 0 ? '放行' : '不放行') : '' }}
												</text>
											</view>
											<view class="cellbody-row-right">
												<text class="cellbody-title">单证是否齐全：</text>
												<text class="cellbody-content">
													{{ citem.checkOutSecurity ? (JSON.parse(citem.checkOutSecurity).paper == 0 ? '√' : '×') : '' }}
												</text>
											</view>
										</view>
										<view class="cellbody">
											<view class="cellbody-row-left">
												<text class="cellbody-title">是否系好安全带：</text>
												<text class="cellbody-content">
													{{ citem.checkOutSecurity ? (JSON.parse(citem.checkOutSecurity).belt == 0 ? '√' : '×') : '' }}
												</text>
											</view>
											<view class="cellbody-row-right">
												<text class="cellbody-title">是否进行安全承诺：</text>
												<text class="cellbody-content">
													{{ citem.checkOutSecurity ? (JSON.parse(citem.checkOutSecurity).safe == 0 ? '√' : '×') : '' }}
												</text>
											</view>
										</view>
										<view class="cellbody">
											<view class="cellbody-row-left">
												<text class="cellbody-title">酒精检查：</text>
												<text class="cellbody-content">
													{{ citem.checkOutSecurity ? (JSON.parse(citem.checkOutSecurity).alcohol == 0 ? '√' : '×') : '' }}
												</text>
											</view>
											<view class="cellbody-row-right">
												<text class="cellbody-title">安全锤配备：</text>
												<text class="cellbody-content">
													{{ citem.checkOutSecurity ? (JSON.parse(citem.checkOutSecurity).hammer == 0 ? '√' : '×') : '' }}
												</text>
											</view>
										</view>
										<view class="cellbody">
											<text class="cellbody-title">灭火器是否有效：</text>
											<text class="cellbody-content">
												{{ citem.checkOutSecurity ? (JSON.parse(citem.checkOutSecurity).fireEx == 0 ? '√' : '×') : '' }}
											</text>
										</view>
										<view class="cellbody">
											<text class="cellbody-title">司机：</text>
											<text class="cellbody-content2">
												{{ mitem.driverName }}
											</text>
											<text class="cellbody-content2">
												{{ mitem.driverPhone }}
											</text>
											<text class="cellbody-content2">
												{{ mitem.plateNumber }}
											</text>
										</view>
									</view>
								</u-collapse-item>
							</u-collapse>
							<view class="row-tip">
								<view class="cell">
									<view class="cell-row-left">
										<text class="cell-letter">核载人数：</text>
										<text class="cell-content">{{ mitem.vehicleSeats || 0 }}</text>
									</view>
									<view class="cell-row-right">
										<text class="cell-letter">实载人数：</text>
										<text class="cell-content">{{ citem.securityCnt || 0 }}</text>
									</view>
								</view>
								<view class="cell">
									<view class="cell-row-left">
										<text class="cell-letter">免票人数：</text>
										<text class="cell-content">{{ citem.securityCnt3 || 0 }}</text>
									</view>
									<view class="cell-row-right">
										<text class="cell-title">编号：</text>
										<text class="cell-content">{{ mitem.vehicleCode }}</text>
									</view>
								</view>
								<view class="cell">
									<text class="cell-title">时间：</text>
									<text class="cell-content2">{{ citem.securityTime }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<empty class="nav-body" v-else text="查无数据"></empty>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import tabBar from '@/components/tabBar.vue';
import empty from '@/components/empty.vue';
import common from '@/utils/common.js';
import selectDay from '@/components/selectDay.vue';
import globaljs from '@/api/global.js';
import date from '@/utils/date.js';
export default {
	components: { selectDay, empty },
	computed: { ...mapGetters(['token']) },
	onLoad() {
		// #ifdef MP
		//未登录转登录页面，已登录转主页面
		if (!this.$store.dispatch('checkIndentity')) return;
		// #endif
		this.initPage(this.selDay);
	},
	methods: {
		initPage(day) {
			this.loadOrder(day);
		},
		async loadOrder(day) {
			//获取指定日期排班历史
			let res = await globaljs.getHistoryOrders(date.formatDate(day, 0), this.token);
			if (common.httpIsWrong(res)) {
				this.hisTask = [];
				return;
			}
			this.hisTask = res.json.data.data;
		}
	},
	data() {
		return {
			hisTask: [],
			selDay: new Date()
		};
	}
};
</script>

<style lang="scss" scoped>
.content {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: white;
	overflow: scroll;
	position: relative;
	.nav-part-bg {
		width: 100%;
		height: 100rpx;
		background-color: #1a90e4;
		position: fixed;
		top: 0;
		z-index: 0;
	}
	.body {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		.nav-day {
			width: 100%;
			height: 100rpx;
			color: white;
			background-color: #1a90e4;
			position: fixed;
			top: var(--window-top, 0);
			z-index: 99;
		}
		.nav-body {
			width: 100%;
			height: 100%;
			position: relative;
			margin-top: 100rpx;
			overflow: scroll;
			.footer {
				margin: 30rpx 20rpx;
				border-radius: 10rpx;
				background-color: white;
				box-shadow: 0px 1px 5px #888888;
				.step-spot {
					display: flex;
					flex-direction: column;
					.row-tip {
						padding: 10rpx 30rpx;
						display: flex;
						flex-direction: column;
						background-color: #e8f2fe;
						.tip-m {
							color: #3c9cff;
						}
						.cell {
							padding: 10rpx 0;
							display: flex;
							.cell-title {
								font-size: 28rpx;
								letter-spacing: 10rpx;
							}
							.cell-letter {
								font-size: 28rpx;
							}
							.cell-content {
								letter-spacing: 10rpx;
								font-size: 28rpx;
								color: #1a90e4;
								margin: 0 20rpx;
							}
							.cell-content2 {
								letter-spacing: 3rpx;
								font-size: 28rpx;
								color: #1a90e4;
								margin: 0 20rpx;
							}
							.cell-row-left {
								width: 50%;
							}
							.cell-row-right {
								flex: 1;
							}
							.cell-row {
								width: 50%;
							}
						}
					}
					.collapse {
						width: 100%;
					}
					.step {
						display: flex;
						flex-direction: column;
						.cellbody {
							padding: 10rpx 0;
							display: flex;
							.cellbody-title {
								font-size: 28rpx;
							}
							.cellbody-content {
								font-size: 28rpx;
								letter-spacing: 4rpx;
								color: #1a90e4;
								margin-left: 20rpx;
							}
							.cellbody-content2 {
								font-size: 28rpx;
								color: #1a90e4;
								margin-left: 20rpx;
							}
							.cellbody-row-left {
								width: 50%;
							}
							.cellbody-row-right {
								flex: 1;
							}
							.cellbody-row {
								width: 50%;
							}
						}
					}
				}
			}
		}
	}
}
::v-deep .u-steps.u-steps--column {
	width: 100%;
}
</style>
